<!DOCTYPE html>
<html lang="zh" data-theme="light">
<head>
  <meta charset="UTF-8" />
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1"
  />
  <title>Spring IM</title>

  <!-- 字体和图标 -->
  <link href="css/fonts-font-poppins.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link rel="stylesheet" href="css/fonts-loli-3-1.css" />
  
  <!-- 新的春天主题样式 -->
  <link rel="stylesheet" href="spring-theme.css" />
</head>
<body>
  <!-- 背景容器 -->
  <div id="backgroundCanvas"></div>
  
  <!-- 主题切换按钮 -->
  <button id="modeToggle" class="toggle-mode">
    <i class="fas fa-moon"></i>
  </button>

  <!-- 春天装饰元素 -->
  <div class="spring-decorations">
    <!-- 飘落花瓣 -->
    <div class="floating-petals">
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
    </div>
    
    <!-- 春天植物 -->
    <div class="spring-plants">
      <div class="plant"></div>
      <div class="plant"></div>
      <div class="plant"></div>
      <div class="plant"></div>
    </div>
  </div>

  <!-- 主页面容器 -->
  <div class="page-wrapper">
    <!-- 标题区域 -->
    <header class="main-title">
      <div class="logo-container">
        <div class="logo-icon">
          <i class="fas fa-leaf"></i>
        </div>
        <h1>Spring IM System</h1>
        <p class="subtitle">- Developed by spring.</p>
      </div>
    </header>

    <!-- 主内容区域 -->
    <main class="container">
      <section class="card">
        <!-- Tab 导航 -->
        <nav class="tabs">
          <button class="tab-btn active" data-target="register">
            <i class="fas fa-user-plus"></i> 注册
          </button>
          <button class="tab-btn" data-target="login">
            <i class="fas fa-sign-in-alt"></i> 登录
          </button>
        </nav>

        <!-- 注册表单 -->
        <form id="register" class="form-section">
          <div id="registerFormMessage" class="form-message hidden"></div>
          
          <div class="form-header">
            <h2>欢迎注册</h2>
            <p>创建您的春日账户</p>
          </div>
          
          <div class="input-group">
            <div class="input-wrapper">
              <i class="fas fa-user input-icon"></i>
              <input type="text" id="registerId" placeholder="用户 ID" aria-label="用户 ID" />
            </div>
          </div>
          
          <div class="input-group">
            <div class="input-wrapper">
              <i class="fas fa-signature input-icon"></i>
              <input type="text" id="registerNickname" placeholder="昵称" aria-label="昵称" />
            </div>
          </div>
          
          <div class="input-group">
            <div class="input-wrapper">
              <i class="fas fa-envelope input-icon"></i>
              <input type="email" id="registerEmail" placeholder="邮箱" aria-label="邮箱" />
            </div>
          </div>
          
          <div class="input-group">
            <div class="input-wrapper">
              <i class="fas fa-lock input-icon"></i>
              <input type="password" id="registerPassword" placeholder="密码" aria-label="密码" />
            </div>
          </div>
          
          <div class="input-group">
            <div class="input-wrapper">
              <i class="fas fa-check-circle input-icon"></i>
              <input type="password" id="confirmPassword" placeholder="确认密码" aria-label="确认密码" />
            </div>
          </div>
          
          <button type="button" class="btn-submit" onclick="registerUser()">
            <i class="fas fa-user-plus"></i>
            <span>注册用户</span>
          </button>
        </form>

        <!-- 登录表单 -->
        <form id="login" class="form-section hidden">
          <div id="loginFormMessage" class="form-message hidden"></div>
          
          <div class="form-header">
            <h2>欢迎登录</h2>
            <p>登录您的春日账户</p>
          </div>
          
          <div class="input-group">
            <div class="input-wrapper">
              <i class="fas fa-user input-icon"></i>
              <input type="text" id="loginId" placeholder="用户 ID" aria-label="用户 ID" />
            </div>
          </div>
          
          <div class="input-group">
            <div class="input-wrapper">
              <i class="fas fa-lock input-icon"></i>
              <input type="password" id="loginPassword" placeholder="密码" aria-label="密码" />
            </div>
          </div>
          
          <button type="button" class="btn-submit" onclick="loginUser()">
            <i class="fas fa-sign-in-alt"></i>
            <span>登录账户</span>
          </button>
        </form>
      </section>
    </main>
  </div>

  <!-- Toast 通知容器 -->
  <div id="toastContainer" class="toast-container"></div>

  <!-- 表单消息模板 -->
  <div id="formMessage" class="form-message hidden"></div>

  <!-- 脚本文件 -->
  <script src="/socket.io/socket.io.js" defer></script>
  <script src="js/crypto-js.min.js" defer></script>
  <script src="particles.js" defer></script>
  <script src="spring-theme.js" defer></script>
  <script src="index.js" defer></script>
</body>
</html>